<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>云APIs</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <style>
    body{background:#EFEFF4;}
        .empty{ text-align: center; padding: 120px 0; }
        .list_content_padded {padding: 10px 10px 0}
.item_data {
    border: 1px solid #ccc;
    background: #fff;
    padding: 10px;
	margin-bottom:10px;
    overflow: hidden;
}
.item_data h3 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
}
.list_button {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 5px;
    background: #ec6d65;
    color: #fff;
    font-size: 18px;
}

.list_input {
    background: #474956;
    height: 50px;
    width: 100%;
    color: #fff;
    box-sizing: border-box;
    border: 0;
    border-radius: 5px;
    font-size: 16px;
    padding: 0 0 0 15px;
}

.text_input .list_input {
    width: 75%;
    float: left;
}
.text_input .list_button {
    width: 20%;
    float: right;
    font-size: 16px;
}
.index_detail_show {
    position: absolute;
    top: 0;
    padding: 44px 0 0;
    left: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    /*display: none;*/
}
.list_content_padded {
    padding:10px 10px 0;
}
.item_data {
    border: 1px solid #ccc;
    background: #fff;
    padding: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}
.index_detail_show ul li {
    line-height: 42px;
    position: relative;
}
.index_detail_show ul li:before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #c8c7cc;
}
.index_detail_show #off_back {
    width: 45%;
    float: left;
    margin-top: 20px;
}
.index_detail_show #confirm_use {
    width: 45%;
    float: right;
    margin-top: 20px;
}
.search_mobile_list{position: absolute;top: 0;left:0;width:100%;height:100%;display: none;z-index:100000000;}
#clear_phone_num_input{
    width:30px;height:30px;line-height: 30px;margin-left:-30px;position: absolute;top:10px;left: 71%;color:#fff;display: none;
}

    </style>
</head>
<body>
    <div class="list_content_padded" id="testxx">
		<div class=" item_data">
			<h3 class="">扫描二维码直接查询</h3>
			<button id="fnScanner_btn" class="list_button" onclick="fnScanner();">点击扫描二维码</button>
		</div>
		<div class=" item_data">
			<h3 class="">输入核销码查询</h3>
			<div class="text_input">
				<input type="number" class="list_input writeOff_input" id="writeOff_input" placeholder="请输入核销码">
				<button id="verification" onclick="inputVerify();" class="list_button">查询</button>
			</div>
		</div>
        <div class=" item_data">
            <h3 class="">输入手机号查询</h3>
            <div class="text_input" style="position:relative">
                <input type="tel" class="list_input writeOff_input" id="mobile_input" placeholder="请输入手机号">
                <span id="clear_phone_num_input" onclick="clearInputBtn();">清空</span>
                <button id="mobileBtn" onclick="inputMobile();" class="list_button">查询</button>
            </div>
        </div>
        <div class="search_mobile_list" id="search_mobile_list">
            <div id="add"></div>
        </div>
	</div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/urlpath.js"></script>
<script>
    var phone_inputc = document.getElementById("mobile_input");
    phone_inputc.oninput = function(){ //监听输入框
        if($api.val($api.byId("mobile_input")) == null || $api.val($api.byId("mobile_input")) == ""){
            $api.css($api.byId("clear_phone_num_input"),"display:none;");
        }else{
            $api.css($api.byId("clear_phone_num_input"),"display:block;");
        }
    }
    function clearInputBtn(){
        $api.val($api.byId("mobile_input"),"");
        if($api.val($api.byId("mobile_input")) == null || $api.val($api.byId("mobile_input")) == ""){
            $api.css($api.byId("clear_phone_num_input"),"display:none;");
        }
    }
	function fnScanner(){
		var FNScanner = api.require('FNScanner');
		FNScanner.openScanner(function( ret, err ){        
//		        alert( JSON.stringify( ret ) );
				if(ret.eventType == "success"){
                    // queryVerifyFn(ret.content);
                    openWindow(ret.content);
				}else if(ret.eventType != "show"){
					// alert("错误类型"+ret.eventType);
				}
		});
	}


    function inputMobile(){
        var mobile_input = $api.val($api.byId("mobile_input"));
        var phoneNum = /^1[34578]\d{9}$/;
        if(phoneNum.test(mobile_input)){
            openOrderWindow(mobile_input);
        }else{
            api.toast({
                msg: '请输入正确的手机号',
                duration: 2000,
                location: 'middle'
            });
        }
    }

    



	function inputVerify(){
        var writeOff_input = $api.byId("writeOff_input");
        var writeOff_inputVal = $api.val(writeOff_input);
        if(writeOff_inputVal == "" || writeOff_inputVal == null){
            // alert("请输入验证码");
            api.toast({
                msg: '请输入验证码',
                duration: 2000,
                location: 'middle'
            });
        }else{
            // queryVerifyFn(writeOff_inputVal);
            openWindow(writeOff_inputVal);
        }
        $api.val(writeOff_input,"");
    }
    function openWindow(writeOff_inputVal){
        api.openWin({
            name: 'verifyLayer',
            slidBackEnabled:false,
            url: URLpath+'/respagenew/call/venderappnew/html/verifyLayer.html',
            pageParam:{
                'verify_sn':writeOff_inputVal
            }
        });
    }
    function openOrderWindow(mobile_input){
        api.openFrame({
            name: 'orderLayer',
            slidBackEnabled:true,
            url: URLpath+'/respagenew/call/venderappnew/html/orderLayer.html',
            bgColor:'#fff',
            bounces:false,
            pageParam:{
                'mobile_input':mobile_input
            },
            animation:{
                type:"push",                //动画类型（详见动画类型常量）
                subType:"from_bottom",       //动画子类型（详见动画子类型常量）
                duration:300  
            }
        });
    }
    function rendorVerify(res){
        $api.text($api.byId("verify_vender_name"),res.vender_name);
        $api.text($api.byId("verify_goods_name"),res.goods_name);
        $api.text($api.byId("verify_goods_price"),res.goods_price);
        $api.text($api.byId("verify_phone"),res.phone);
        $api.text($api.byId("verify_order_time"),res.order_time);
        if(res.left_count){
            $api.text($api.byId("verify_is_use"),res.left_count);
        }else{
            if(res.is_use == 0 ){
                $api.text($api.byId("verify_is_use"),'未使用');
                $api.addCls($api.byId("verify_is_use"), 'no_used');
            }else if(res.is_use == 1 ){
                $api.text($api.byId("verify_is_use"),'已使用');
            }
        }
    }
</script>
</html>